import React from "react";
import classNames from "classnames";

export enum ButtonSize {
    Large = "lg",
    Small = "sm"
}
export type ButtonType = "primary" | "default" | "danger" | "link"
interface BaseButtonProps {
    className?: string;
    disabled?: boolean;
    size?: ButtonSize;
    btnType?: ButtonType;
    children: React.ReactNode;
    href?: string;
}
// buttton原生属性  type &取并集
type NativeButtonProps = BaseButtonProps &
    React.ButtonHTMLAttributes<HTMLElement>;
// a标签原生属性
type AnchorButtonProps = BaseButtonProps &
    React.AnchorHTMLAttributes<HTMLElement>;
export type ButtonProps = Partial<NativeButtonProps & AnchorButtonProps>; //Partial可选

const Button: React.FC<ButtonProps> = props => {
    const {
        btnType,
        disabled,
        size,
        children,
        href,
        className,
        ...restProps
    } = props;
    // console.log(restProps);
    const classes = classNames("btn", className, {
        [`btn-${btnType}`]: btnType,
        [`btn-${size}`]: size,
        disabled: btnType === 'link' && disabled
    });
    if (btnType === 'link' && href) {
        return (
            <a href={href} className={classes} {...restProps}>
                {children}
            </a>
        );
    } else {
        return (
            <button className={classes} {...restProps}>
                {children || "按钮"}
            </button>
        );
    }
};
Button.defaultProps = {
    disabled: false,
    btnType: 'default'
};
export default Button;
